import React, { useEffect } from 'react';
import { Form, Input, Select } from "antd";
import PropTypes from 'prop-types'

const { Option } = Select;

const AddForm = ({ categorys, setForm, onAddFieldsDataChange, addAllFields }) => {
  const [form] = Form.useForm();

  const onAddFieldsChange = (changedFields, data) => {
    onAddFieldsDataChange(data)
  }

  useEffect(() => {
    setForm(form)
  }, [])

  return (
    <div>
      <Form
        name="basic"
        form={form}
        layout="vertical"
        fields={addAllFields}
        onFieldsChange={onAddFieldsChange}
      >
        <Form.Item
          label="一级分类列表"
          name="parentId"
          rules={[{ required: true, message: '请输入一级分类列表!' }]}
        >
          <Select>
            <Option value="0">一级分类</Option>
            {
              categorys.map(item => <Option key={item._id} value={item._id}>{item.name}</Option>)
            }
          </Select>
        </Form.Item>

        <Form.Item
          label="分类名称"
          name="categoryName"
          rules={[{ required: true, message: '请输入分类名称!' }]}
        >
          <Input placeholder="请输入分类名称!"/>
        </Form.Item>

      </Form>
    </div>
  );
}

export default AddForm;


AddForm.propTypes = {
  setForm: PropTypes.func.isRequired, // 用来传递form对象的函数
  categorys: PropTypes.array.isRequired, // 一级分类数组

}
